<template>
  <button class="yt-button" @click="handleClick">
    <i :class="['yt-button-icon',`yt-button-${type}`]"></i>
  </button>
</template>

<script>
export default {
  name: "index",
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  methods:{
    handleClick(evt) {
      this.$emit('click', evt);
    }
  }
}
</script>

<style scoped lang="scss">
  .yt-button {
    /*width: 20px;*/
    /*height: 20px;*/
    cursor: pointer;
    vertical-align: middle;
    font-size: 0;
    background-color: transparent;
    line-height: 1;
    &+.yt-button{
      margin-left: 10px;
    }

    .yt-button-icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      background-size: 100%;
      background-position: center center;
      background-repeat: no-repeat;
    }

    .yt-button-del {
      background-image: url("/static/images/icon/del.png");
    }

    .yt-button-edit {
      background-image: url("/static/images/icon/edit.png");
    }

    .yt-button-reset {
      background-image: url("/static/images/icon/reset.png");
    }

    .yt-button-out {
      background-image: url("/static/images/icon/out.png");
    }
  }
</style>